<template>
	<view class="content">
		<view>
		  <image src="@/static/bgImg.png" class="bg-head"></image> 
		  <image src="@/static/logo.png" class="logo"></image>
		  <view class="store-info">
			  <view class="name">便民超市（营业中）</view>
			  <view class="address"><image src="@/static/location.png"></image>{{address}}</view>
		  </view>
		  <image src="@/static/msg.png" class="msg"></image>
		  <view class="banner">
			  <swiper
			  indicator-dots="true"
			  indicator-color="#A0A0A0"
			  indicator-active-color="#FFFFFF"
			  circular="true"
			  autoplay="true"
			  interval="3000">
			    <swiper-item v-for="(item, index) in swipers" :key="index">
					<image :src="item"></image>
				</swiper-item>
			  </swiper>
		  </view>
		</view>
		<view class="nav">
			<view class="navs">
				<view class="nav-item" @tap="yuequan">
					<image src="@/static/yuequan.png"></image>
					<text>越权管理</text>
				</view>
				<view class="nav-item" @tap="productManage"> 
					<image src="@/static/product.png"></image>
					<text>商品管理</text>
				</view>
				<view class="nav-item" @tap="orderManage">
					<image src="@/static/order.png"></image>
					<text>订单管理</text>
				</view>
			</view>
			<view class="navs">
				<view class="nav-item" @tap="salesManage">
					<image src="@/static/shouhou.png"></image>
					<text>售后管理</text>
				</view>
				<view class="nav-item" @tap="computemanage">
					<image src="@/static/jiesuan.png"></image>
					<text>结算管理</text>
				</view>
				<view class="nav-item" @tap="grademanage">
					<image src="@/static/yeji.png"></image>
					<text>业绩管理</text>
				</view>
			</view>
			<view class="navs">
				<view class="nav-item" @tap="commentmanage">
					<image src="@/static/comment.png"></image>
					<text>评论管理</text>
				</view>
				<view class="nav-item" @tap="activity">
					<image src="@/static/activity.png"></image>
					<text>营销活动</text>
				</view>
				<view class="nav-item" @tap="tousu">
					<image src="@/static/tousu.png"></image>
					<text>客户投诉</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address:'成都市金牛区李家沱457号',
				swipers:[
					require('@/static/banner.png'),
					'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2495360511,2005066913&fm=26&gp=0.jpg',
					'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3118943204,2441411556&fm=26&gp=0.jpg',
					'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=28541236,4107248362&fm=26&gp=0.jpg'
				]
			}
		},
		onLoad() {

		},
		methods: {
		  yuequan(){
			  uni.navigateTo({
			  	url:"../yuequan/yuequan"
			  })
		  },
          productManage(){
			  uni.navigateTo({
			  	url:"../productManage/productManage"
			  })
		  },
		  orderManage(){
			  uni.switchTab({//跳转到tabBar页面
			  	url:"../ordermanage/ordermanage"
			  })
		  },
		  salesManage(){
			  uni.navigateTo({
			  	url:"../salesManage/salesManage"
			  })
		  },
		  computemanage(){
			  uni.navigateTo({
			  	url:"../computemanage/computemanage"
			  })
		  },
		  grademanage(){
			  uni.navigateTo({
			  	url:"../grademanage/grademanage"
			  })
		  },
		  commentmanage(){
			  uni.navigateTo({
			  	url:"../commentmanage/commentmanage"
			  })
		  },
		  activity(){
			  uni.navigateTo({
			  	url:"../activity/activity"
			  })
		  },
		  tousu(){
			  uni.navigateTo({
			  	url:"../tousu/tousu"
			  })
		  }
		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(245, 245, 245);
		font-family: Alibaba PuHuiTi;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.bg-head {
		width: 750rpx;
		height: 390rpx;
		position: relative;
	}
	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: absolute;
		left: 30rpx;
		top: 108rpx;
	}
	.store-info {
		position: absolute;
		left: 150rpx;
		top: 108rpx;
		color: #1A1A1A;
		font-weight: 400;
		.name {
			font-size: 34rpx;
		}
		.address {
			font-size: 24rpx;
			margin-top: 25rpx;
		}
		.address image {
			width: 16rpx;
			height: 20rpx;
			margin-right: 10rpx;
		}
	}
	.msg {
		width: 34rpx;
		height: 36rpx;
		position: absolute;
		left: 676rpx;
		top: 108rpx;
	}
	.banner {
		width: 690rpx;
		height: 260rpx;
		position: absolute;
		left: 30rpx;
		top: 238rpx;
		swiper {
			width: 690rpx;
		}
	    image {
			width: 100%;
			height: 100%;
		}
	}
	.nav {
		width: 690rpx;
		height: 640rpx;
		margin-top: 150rpx;
	}
	.navs {
		display: flex;
		margin-top: 20rpx;
	}
	.nav-item {
		width: 218rpx;
		height: 200rpx;
		background: #FFFFFF;
		margin-right: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			width: 96rpx;
			height: 96rpx;
		}
		text {
			font-size: 26rpx;
			font-weight: 400;
			color: #4D4D4D;
			line-height: 60rpx;
		}
	}
	.nav-item:last-child {
		margin-right: 0rpx;
	}
</style>
